import React, { useRef } from 'react'
import { Tabs, theme } from 'antd'
import Home from './components/home/home'
import Build from './components/build/build'
import Product from './components/product/product'
import Icon from './components/icon/icon'
import AboutMy from './components/aboutMy/aboutMy'
import Text from './components/text/index'
import Case from './components/case/case'

const App = () => {
  const HomeRef = useRef(null)
  const CaseRef = useRef(null)
  const BuildRef = useRef(null)
  const ProductRef = useRef(null)
  const IconRef = useRef(null)
  const AboutMyRef = useRef(null)
  const TextRef = useRef(null)
  let tablsList = [
    {
      tableTitle: '首页轮播图',
      view: <Home ref={HomeRef} />
    },
    {
      tableTitle: '案例展示',
      view: <Case ref={CaseRef} />
    },
    {
      tableTitle: '施工视频',
      view: <Build ref={BuildRef} />
    },
    {
      tableTitle: '产品介绍',
      view: <Product ref={ProductRef} />
    },
    {
      tableTitle: '图标管理',
      view: <Icon ref={IconRef} />
    },
    {
      tableTitle: '关于我们',
      view: <AboutMy ref={AboutMyRef} />
    },
    {
      tableTitle: '底图更换与文本编辑',
      view: <Text ref={TextRef} />
    }
  ]
  const items = tablsList.map((item, i) => {
    return {
      label: item.tableTitle,
      key: i,
      children: item.view,
      style:
        i === 0
          ? {
              height: 200
            }
          : undefined
    }
  })
  const changeFn = (data) => {
    if (data == 0) {
      setTimeout(() => {
        HomeRef.current.handleChildMethod()
      })
    } else if (data == 1) {
      setTimeout(() => {
        CaseRef.current.handleChildMethod()
      })
    } else if (data == 2) {
      setTimeout(() => {
        BuildRef.current.handleChildMethod()
      })
    } else if (data == 3) {
      setTimeout(() => {
        ProductRef.current.handleChildMethod()
      })
    } else if (data == 4) {
      setTimeout(() => {
        IconRef.current.handleChildMethod()
      })
    } else if (data == 5) {
      setTimeout(() => {
        AboutMyRef.current.handleChildMethod()
      })
    } else if (data == 6) {
      setTimeout(() => {
        TextRef.current.handleChildMethod()
      })
    }
  }
  const {
    token: { colorBgContainer }
  } = theme.useToken()
  const renderTabBar = (props, DefaultTabBar) => (
    <DefaultTabBar
      {...props}
      style={{
        background: colorBgContainer
      }}
    />
  )
  return (
    <Tabs
      defaultActiveKey="1"
      onChange={changeFn}
      renderTabBar={renderTabBar}
      items={items}
    />
  )
}
export default App
